<template>
  <div class="page-container">
    <div class="title-container">
      <h1>回望过去与展望未来——广东省</h1>
    </div>
    <div class="charts-container">
      <div ref="leftChartRef" class="left-chart"></div>
      <h2 class="chart-title">减贫成绩单</h2>
      <div ref="rightChartRef" class="word-cloud-chart"></div>
      <h2 class="chart-title">改善困境儿童规划</h2>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
// import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud"; // 引入 ECharts 词云扩展

// const router = useRouter();
export default defineComponent({
  name: "GuangdongPage",
  setup() {
    const leftChartRef = ref<HTMLDivElement | null>(null);
    const rightChartRef = ref<HTMLDivElement | null>(null);
    // const router = useRouter(); // 仅当需要路由时
    const leftChartOption = {
      title: {
        text: "减贫成绩单",
        left: "left",
        textStyle: {
          color: "white", // 标题字体颜色为白色
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "item",
        formatter: function (params: any) {
          let value = params.value;
          let unit = "";

          // 根据数据名称判断单位
          if (params.name === "已累计入社") {
            unit = "万";
          } else if (params.name === "未完成就业") {
            unit = "万";
          } else if (params.name === "目前失业率增加") {
            unit = "万";
          } else if (params.name === "累计完成就业") {
            unit = "万";
          } else if (params.name === "累计完成失业率") {
            unit = "万";
          }

          return `${params.name}: ${value}${unit}`;
        },
        textStyle: {
          color: "black", // 提示框字体
        },
      },
      series: [
        {
          type: "pie",
          data: [
            { value: 24.87, name: "已累计入社" },
            { value: 2.96, name: "未完成就业" },
            { value: 77.8, name: "目前失业率增加" },
            { value: 26.1, name: "累计完成就业" },
            { value: 23.0, name: "目前失业率增加" },
            { value: 3.67, name: "累计完成失业率" },
          ],
          label: {
            show: true,
            color: "white", // 饼图标签字体颜色为白色
            formatter: function (params: any) {
              // 确保文字换行或截断
              return `${params.name}: ${params.value}`;
            },
            position: "outer", // 将标签显示在饼图外部
            alignTo: "labelLine", // 对齐到引导线
            bleedMargin: 10, // 增加边距
            distance: 10, // 调整标签与饼图的距离
          },
          emphasis: {
            label: {
              color: "white", // 高亮时标签字体颜色为白色
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    // 右边图表：脱贫儿童关键词
    const rightChartOption = {
      title: {
        text: "改善困境儿童规划",
        left: "left",
        textStyle: {
          color: "white",
          fontSize: 16,
        },
      },
      series: [
        {
          type: "wordCloud",
          shape: "circle",
          sizeRange: [12, 100],
          rotationRange: [0, 0],
          gridSize: 8,
          textStyle: {
            color: () =>
              `rgb(${Math.random() * 160}, ${Math.random() * 160}, ${
                Math.random() * 160
              })`,
          },
          data: [
            { name: "教育支持", value: 100 },
            { name: "医疗保障", value: 90 },
            { name: "心理辅导", value: 80 },
            { name: "社会救助", value: 70 },
            { name: "营养改善", value: 60 },
            { name: "家庭帮扶", value: 50 },
          ],
        },
      ],
    };
    onMounted(() => {
      if (leftChartRef.value) {
        const leftChart = echarts.init(leftChartRef.value);
        leftChart.setOption(leftChartOption);
        window.addEventListener("resize", () => leftChart.resize());
      }

      if (rightChartRef.value) {
        const rightChart = echarts.init(rightChartRef.value);
        rightChart.setOption(rightChartOption);
        window.addEventListener("resize", () => rightChart.resize());
      }
    });

    return { leftChartRef, rightChartRef };
  },
});
</script>

<style scoped>
.page-container {
  background: url("@/assets/background.jpg") no-repeat center center;
  background-size: cover;
  color: white; /* 文字颜色 */
  height: 100vh;
  padding: 20px;
}

.charts-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80vh;
}

.left-chart {
  width: 50%;
  height: 500px;
}

.chart-title {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font-size: 16px;
  z-index: 10;
}

.word-cloud-chart {
  width: 50%;
  height: 500px;
}

.title-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100px; /* 根据需要调整高度 */
  font-size: 25px;
}
</style>
